<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 微信图文编辑器 </title>

<!-- CDN  -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<!-- <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"> -->
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!-- <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> -->
<!-- CDN hosted by Cachefly -->
<!-- <script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script> -->

<!-- 本地 -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../js/jquery-2.1.3.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="../lib/bootstrap-3.3.2/js/bootstrap.min.js"></script>
 
<script src="../lib/tinymce_4.1.7/tinymce.min.js"></script>
 
<style>
#mpedit{
height: 500px;
}
</style>
<script>

 var templateNum = 7;//实际使用的模版数目
 var workspaceNum = 9;//实际使用的工作空间数目
 
 var _template = new Array(templateNum);//默认模版
 var template = new Array(templateNum);//当前模版
 var workspace = new Array(workspaceNum);//工作空间
 var editor = null;//当前编辑器对象
 var editing = null;//当前编辑内容
 
 $(function(){
	 tinymce.init({
			language : "zh_CN",
			selector : '#mpedit',
			theme : "modern",
			plugins : [
					"advlist autolink lists link image charmap print preview hr anchor pagebreak",
					"searchreplace wordcount visualblocks visualchars code fullscreen",
					"insertdatetime media nonbreaking save table contextmenu directionality",
					"emoticons template paste textcolor colorpicker textpattern" ],
			toolbar1 : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
			toolbar2 : "print preview media | forecolor backcolor",
			image_advtab : true,
			 paste_webkit_styles: "all",
		   init_instance_callback : function(_editor) {
			       editor = _editor; //获取编辑器  设置别名简写方便
			    } 
	     });  
 
	 
	 editing = workspace[0];//默认主工作空间为第一个
	 
	 for(var i=0;i<templateNum;i++){
		 _template[i] = $("#template_"+i).html();
		 template[i] = localStorage.getItem('template_'+i );
	 }
 
	for(var i=0;i<workspaceNum;i++){
		workspaceNum[i] = localStorage.getItem('workspaceNum_'+i  );
	 } 
 });
 
 //更改编辑器内容
 function changeContent(content){ 
	 if(content!=undefined && content!=null){
		 content= "";
	 }
	 editing = editor.getContent();
	 editor.setContent(content);
	 editing = content;
 }
 
 //还原默认模版
 function resetTemplate(){
	 for(var i=0;i<templateNum;i++){
		 template[i] =  _template[i] ;
	 }
 }
 //清空编辑器
 function deleteEdit(){
	 editor.setContent("");
 }
 //全部保存
 function saveAll(){
 
	for(var i=0;i<templateNum;i++){
	   localStorage.setItem('template_'+i , template[i]);
	 }
	 for(var i=0;i<workspaceNum;i++){
		  localStorage.setItem('workspaceNum_'+i , workspaceNum[i]);
	 } 
 }
	
</script>

 
</head>
<body>

<div class="container">
 

   <h1>微信图文编辑器 </h1>

参考资料
<a href="http://www.bootcss.com/p/websafecolors/"> WEB安全色 </a>
<a href="http://tool.oschina.net/commons?type=3">RGB颜色参考</a>
<a href="http://getemoji.com"> emoji 表情 </a>

<div class="row">
  <div class="col-md-2"> <input class="btn btn-primary btn-lg" type="button"  onclick="changeContent(workspace[0])"  value="主工作空间">  </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"  onclick="changeContent(template[0])" value="标题"> </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"  onclick="changeContent(template[1])"  value="文字边框"> </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"  onclick="changeContent(template[2])"  value="关注引导"> </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"  onclick="changeContent(template[3])"  value="模版"> </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"   onclick="changeContent(template[4])" value="模版">  </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"   onclick="changeContent(template[5])" value="模版">  </div>
  <div class="col-md-1"> <input class="btn btn-success" type="button"   onclick="changeContent(template[6])" value="模版">  </div>
 
 
</div>
<div class="row">
  <div class="col-md-2"> <input class="btn" type="button"  onclick="changeContent(workspace[1])"   value="自定义空间一"> </div>
  <div class="col-md-1"> <input class="btn" type="button"  onclick="changeContent(workspace[2])"  value="空间二"> </div>
  <div class="col-md-1"> <input class="btn " type="button"  onclick="changeContent(workspace[3])"  value="空间三"> </div>
  <div class="col-md-1"> <input class="btn" type="button"  onclick="changeContent(workspace[4])"  value="空间四"> </div>
  <div class="col-md-1"> <input class="btn" type="button"  onclick="changeContent(workspace[5])"  value="空间五"> </div>
  <div class="col-md-1"> <input class="btn" type="button"  onclick="changeContent(workspace[6])"  value="空间六"> </div>
  <div class="col-md-1"> <input class="btn" type="button"  onclick="changeContent(workspace[7])"  value="空间七"> </div>
  <div class="col-md-1"> <input class="btn" type="button"  onclick="changeContent(workspace[8])"  value="空间八"> </div>
 
</div>
<div class="row">
  <div class="col-md-10">
     <textarea id="mpedit"> </textarea>
  </div>
  <div class="col-md-1">
     <input class="btn btn-warning" type="button" value="默认模版还原" onclick="resetTemplate()">  <br> <br> 
     <input class="btn btn-warning" type="button" value="清空当前工作空间" onclick="deleteEdit()">  <br> <br> 
     <input class="btn btn-warning" type="button" value="保存" onclick="saveAll()"  title="保存在本地,并不可靠,定期将需要的样式保存其它地方">  
  </div>
 
</div>

<h2> 模版0 </h2>
<div id="template_0">
      请输入标题
</div>
<h2> 模版1 </h2>
<div id="template_1">
      请输入标题
</div>
<h2> 模版2 </h2>
<div id="template_2">
      请输入标题
</div>
<h2> 模版3 </h2>
<div id="template_3">
      请输入标题
</div>
<h2> 模版4 </h2>
<div id="template_4">
      请输入标题
</div>
<h2> 模版5 </h2>
 <div id="template_5">
      请输入标题
</div>
<h2> 模版6 </h2>
<div id="template_6">
      请输入标题
</div>

<h2>工作空间0</h2>
<div id="workspace_0">

</div>
<h2>工作空间1</h2>
<div id="workspace_1">

</div>
<h2>工作空间2</h2>
<div id="workspace_2">

</div>
<h2>工作空间3</h2>
<div id="workspace_3">

</div>
<h2>工作空间4</h2>
<div id="workspace_4">

</div>
<h2>工作空间5</h2>
<div id="workspace_5">

</div>
<h2>工作空间6</h2>
<div id="workspace_6">

</div>
<h2>工作空间7</h2>
<div id="workspace_7">

</div>
<h2>工作空间8</h2>
<div id="workspace_8">

</div>
  
编辑器 使用 <a href="http://www.tinymce.com">tinymce</a>
网页主题使用 <a href="http://getbootstrap.com">bootstrap</a>
 
 </div>
 
</body>
</html>